<template>
  <el-card>
    <template #header>商品列表</template>

    <div>
      <!-- 1.0 渲染表格的数据 -->
      <el-table :data="goods" style="width: 100%" size="small">
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="category_name" label="分类名称">
        </el-table-column>
        <el-table-column prop="create_time" label="创建日期" width="180px">
        </el-table-column>
        <el-table-column label="商品图片">
          <template v-slot="{ row }">
            <img :src="row.img_url" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="商品描述"> </el-table-column>
        <el-table-column prop="price" label="商品价格"> </el-table-column>
        <el-table-column prop="sales_volume" label="销量"> </el-table-column>
        <el-table-column prop="evaluate_num" label="商品评价">
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template v-slot="{ row }">
            <!-- @click="$router.push('/goods/edit?id=' + row.id)" -->
            <el-button
              type="primary"
              size="mini"
              @click="$router.push(`/goods/edit/${row.id}`)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 2.0 分页的数据渲染 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { goodsList } from '../../api/goods'

export default {
  data() {
    return {
      goods: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    async getGoods() {
      const users = JSON.parse(localStorage.getItem('users') || '{}')
      const { data, count } = await goodsList({
        member_id: users.member_id,
        access_token: users.access_token,
        page: this.currentPage,
        limit: this.pageSize
      })
      this.goods = data
      this.total = count
      console.log(data)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getGoods()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getGoods()
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 50px;
}
</style>
